<template>
  <div>
    <van-row>
      <van-col span="24" id="hh">
        <van-nav-bar
          title="订单详情"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-col>
    </van-row>
    <van-image
      src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00769-3581.jpg"
    >
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>

    <van-notice-bar
      color="#1989fa"
      background="#ecf9ff"
      left-icon="volume-o"
      text="滴滴高效辅导，平时不用愁，期末不挂科，欢迎新老顾客了解。全场五折"
    />
    <h1 id="title">{{ order.ofTitle }}</h1>
    <p class="starttime">
      {{ order.ofCreateTime }}
    </p>
    <p class="endtime">
      {{ order.ofEndTime }}
    </p>
    <p class="zzz">
      {{ order.ofLabel }}
    </p>
    <p class="hhh">
      {{ order.ofDescribe }}
    </p>
    <div id="end">
      <van-goods-action>
        <van-button round block type="info" :text="flag" color="#6F00D2" />
        <van-button
          round
          block
          type="info"
          text="我已完成"
          color="#6F00D2"
          v-if="reId != 1 && order.ofState == 2"
          @click="AllOver(order.ofId, 3)"
        />
        <van-button
          round
          block
          v-show="reId == 1 && order.ofState == 2 && order.ofUrId == userID"
          @click="xiadan"
          type="danger"
          text="催 单"
          color="#7232dd"
        />
        <van-button
          round
          block
          v-show="reId == 1 && order.ofState == 3 && order.ofUrId == userID"
          @click="AllOver(order.ofId, 4)"
          type="danger"
          text="确认已完成"
          color="#7232dd"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import api from "@/api/order";
import index from "@/api/index";
export default {
  created() {
    this.getList();
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      api.lookDetails(this.ofId).then((res) => {
        this.order.ofCreateTime = res.data.data.ddOrderForm.ofCreateTime;
        this.order.ofDescribe = res.data.data.ddOrderForm.ofDescribe;
        this.order.ofEndTime = res.data.data.ddOrderForm.ofEndTime;
        this.order.ofId = res.data.data.ddOrderForm.ofId;
        this.order.ofLabel = res.data.data.ddOrderForm.ofLabel;
        this.order.ofPrice = res.data.data.ddOrderForm.ofPrice;
        this.order.ofTitle = res.data.data.ddOrderForm.ofTitle;
        this.order.ofUrId = res.data.data.ddOrderForm.ofUrId;
        this.order.ofState = res.data.data.ddOrderForm.ofState;
        console.log(this.order);
        if (res.data.data.ddOrderForm.ofState == "1") {
          this.flag = "待接单";
        } else if (res.data.data.ddOrderForm.ofState == "2") {
          this.flag = "进行中";
        } else if (res.data.data.ddOrderForm.ofState == "3") {
          this.flag = "待确认";
        } else {
          this.flag = "已完成";
        }

        index.info(this.userID).then((res) => {
          this.reId = res.data.data.ddUser.reId;
          console.log(this.reId);
        });
      });
    },
    AllOver(ofId, state) {
      var order = {
        ofId: ofId,
        ofState: state,
      };
      api.updataOrder(order).then((res) => {
        this.$dialog({
          message: res.data.message,
        });
        this.getList();
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    xiadan() {
      alert("催单成功!");
    },
  },
  data() {
    return {
      flag: "待查看",
      ofId: this.$route.query.ofId,
      order: {
        ofCreateTime: "2021年10月31天 15时16分",
        ofDescribe: "测试",
        ofEndTime: "2021年11月07天 15时16分",
        ofId: "cbd11155c5f94410a40aa1946010deaaf",
        ofLabel: "java",
        ofPrice: 220,
        ofTitle: "测试",
        ofUrId: 9,
      },
      reId: "",
      userID: localStorage.getItem("tokenlo"),
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#title {
  text-align: center;
  font-weight: 400;
}
.zzz {
  line-height: 30px;
  text-indent: 2em;
}
.starttime {
  float: left;
  font-size: 12px;
  padding-left: 10px;
  margin-top: 10px;
}
.endtime {
  float: right;
  padding-right: 10px;
  font-size: 12px;
  margin-top: 10px;
}
/deep/ .van-goods-action {
  padding-right: 20px;
  padding-left: 20px;
}
.hhh {
  width: 100%;
  line-height: 30px;
  text-align: left;
  text-indent: 2em;
}
</style>


